<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script>
            window.onload = function(){
                var tblEle = document.getElementById("text");
                var len = tblEle.tBodies[0].rows.length;
                for(var i=0;i<len;i++){
                    if(i%2==0){
                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
                    }else{
                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
                    }
                }
            }
        </script>

</head>
<body>
    <h3 align="center" >四大名著</h3>
    <table border="1px;" align="center"  cellpadding="30px;" cellspacing=" 15px;" id="text">
    <thead bgcolor="red">
    <th>书名</th>
    <th>作者</th>
    <th>价格</th>
    </thead>
    <tbody>
    {% for book in books %}
    <tr>
    <td>{{ book.name }}</td>
    <td>{{ book.author }}</td>
    <td>{{ book.price }}</td>
    </tr>
    {% endfor %}

    </tbody>
</table>
</body>
</html>


